<template>
  <div class="stat-container">
    <page-header :content="title" :go="goBack"></page-header>
    <div class="stat-body">
      <el-tabs v-model="activeTab" type="card">
        <el-tab-pane label="统计分析" name="stat-single" lazy>
          <div class="select-row">
            <span class="title">活动券</span>
            <el-button class="btn" size="small" @click="singleVisible = true">选择活动券</el-button>
          </div>
          <!--<single :code-id="singleTicketIds.length>0 ? singleTicketIds[0] : 0" />-->
          <single :ticket-id="ticketId" :coupon-id="singleTicketIds.length>0 ? singleTicketIds[0] : 0" />
        </el-tab-pane>
        <el-tab-pane label="数据对比" name="stat-contrast" lazy>
          <div class="select-row">
            <el-button class="btn" @click="contrastVisible = true">选择活动券</el-button>
            <span class="text">已选 {{ contrastTicketIds.length }}/{{ max }}</span>
          </div>
          <contrast :ticket-id="ticketId" :coupon-ids="contrastTicketIds" />
        </el-tab-pane>
      </el-tabs>
    </div>
    <choose-ticket-coupon-dialog
      v-if="singleVisible"
      v-model="singleTicketIds"
      :ticket-id="ticketId"
      :visible.sync="singleVisible"
      :max="1"
    />
    <choose-ticket-coupon-dialog
      v-if="contrastVisible"
      v-model="contrastTicketIds"
      :ticket-id="ticketId"
      :visible.sync="contrastVisible"
      :max="max"
    />
  </div>
</template>

<script>
import PageHeader from '@/components/page-header';
import Single from './panes/Stat/Single'
import Contrast from './panes/Stat/Contrast'
import ChooseTicketCouponDialog from './components/ChooseTicketCouponDialog'

export default {
  name: 'Stat',
  components: {
    Single,
    Contrast,
    ChooseTicketCouponDialog,
    PageHeader
  },
  props: {
    title: {
      type: String,
      default: '数据分析详情'
    },
    ticketId: {
      type: [String, Number],
      require: true,
      default: 0
    }
  },
  data() {
    return {
      activeTab: 'stat-single',
      // 单个活码分析
      singleVisible: false,
      singleTicketIds: [],
      // 活码对比
      contrastVisible: false,
      contrastTicketIds: [],
      max: 5 // 支持同时选择对少个活码对比
    }
  },
  methods: {
    goBack() {
      this.$emit('close')
    }
  }
}
</script>
<style scoped lang="scss">
.stat-container {
  .stat-body {
    padding: 0 20px;
  }

  margin-bottom: 20px;
}

.select-row {
  width: 100%;
  padding: 10px;
  background-color: #FAFAFA;
  margin-bottom: 30px;

  .btn {
    margin-left: 6px;
  }

  .text {
    color: #8C8C8C;
    font-weight: 400;
    font-size: 12px;
    margin-left: 8px;
  }
}
</style>
